<template>
    <div class="groupDetail">
        <x-header></x-header>
        <main class="Site-content">
            <div class="divi">
                <divider>战队详情</divider>
            </div>
            <div class="info">
                <div class="line">
                    <div class="title">战队名称：</div>
                    <div class="name">{{groupname}}</div>
                </div>
                <div class="line">
                    <div class="title">领队：</div>
                    <div class="name">{{leader}}</div>
                </div>
                <div class="line">
                    <div class="title">战队总排名：</div>
                    <div class="name">第{{rank}}名</div>
                </div>
            </div>
            <div class="group_num">战队成员（{{num}}人）</div>
            <div class="leader">
                <div class="leader_name">{{name}}</div>
                <div class="steps">总步数：{{steps}}</div>
            </div>
            <div class="btn_add tn_rec_normal" @click="goAdd()"><span>申请加入</span></div>
        </main>
        <x-footer></x-footer>
    </div>
</template>

<script>
    import xHeader from './common/header.vue'
    import xFooter from './common/footer.vue'
    import {Divider, XInput, Group} from 'vux'

    export default {
        name: 'groupDetail',
        components: {
            xHeader,
            xFooter,
            Divider,
            XInput,
            Group,
        },
        data() {
            return {
                groupname: '超能陆战队',
                leader: '张尚华',
                rank: 20,
                num: 5,
                name: '张尚华',
                steps: 0,
            }
        },
        created() {

        },

        methods: {
            //点击申请加入按钮
            goAdd(){
                this.$router.push({
                    name:'buildGroup',
                    params:{
                        id:'2',
                    }
                })
            },

        },

    }

</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
    .groupDetail {
    .info {
        height: 7rem;
        background-color: #fff;
        padding: 0 .8rem;
        margin: 1rem 0;
    .line {
        height: 2.2rem;
        line-height: 2.2rem;
    .title {
        width: 8rem;
        color: #777;
        display: inline-block;
    }
    .name {
        color: #000;
        display: inline-block;
    }
    }
    }
    .group_num {
        height: 3.2rem;
        line-height: 3.2rem;
        color: #fff;
        background-color: #F9D14A;
        padding-left: 1.2rem;
    }
    .leader {
        height: 3.6rem;
        line-height: 3.6rem;
        background-color: #fff;
    padding-left:1.2rem;
    .leader_name {
        width: 8rem;
        color: #000;
        display: inline-block;
    }
    .steps {
        color: #777;
        display: inline-block;
    }
    }
    .btn_add{
        height: 2.3rem;
        line-height: 2.3rem;
        color:#fff;
        background-color: #F43952;
        text-align: center;
        margin:0 1.2rem;
        margin-top:calc(100% - 60rem)
    }
    }
</style>